<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="x-ua-compatible" content="ie=edg">
  <title>响应式布局页面</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="src/css/normalize.css" rel="stylesheet">
  <link href="src/css/main.css" rel="stylesheet">
</head>
<body>
<!--[if lte IE8]>
<p class="browerupgrade">抱歉，您的浏览器版本太低,请移至 <a href="http://browser-update.org/zh/update-browser.html">这里</a> 更新,以获取更加的体验</p>
<![endif]-->

<header>
  <nav class="top">
    <span class="tel">理财热线: 400-888-8888</span>
    <ul>
      <li><a href="#">登录</a></li>
      <li><a href="#">快速注册</a></li>
      <li><a href="#">关于</a></li>
      <li><a href="#">帮助</a></li>
      <li><a href="#">APP下载</a></li>
    </ul>
  </nav>
  <nav class="main">
    <a href="#" class="brand"><img src="./src/img/logo@1x.png" alt="回到首页"></a>
    <ul>
      <li><a href="#">首页</a></li>
      <li><a href="#">理财频道</a></li>
      <li><a href="#">投资频道</a></li>
      <li><a href="#">新手专区</a></li>
      <li><a href="#">安全保障</a></li>
    </ul>
  </nav>
</header>

<div class="container">
  <section class="transaction">
    <div class="trans-content">
      <div class="trans-data clearfix">
        <span>平台累计成交金额</span>
        <span class="trans-money">19888</span>
        <span>万元</span>
      </div>
      <div class="trans-data clearfix">
        <span>过去7日成交金额</span>
        <span class="trans-money">18888</span>
        <span>万元</span>
      </div>
      <div class="trans-report">
        <a href="#">查看平台运营报告</a>
      </div>
    </div>
  </section>

  <section class="ad">
    <div class="item">
      <img src="src/img/ad001.png">
    </div>
    <div class="item">
      <img src="src/img/ad002.png">
    </div>
    <div class="item">
      <img src="src/img/ad003.png">
    </div>
  </section>

  <section class="feature">
    <div class="item">
      <h3>安全</h3>
      <p>国家AAA信用平台<br/>银行资金托管<br/>上市公司背景保证</p>
    </div>
    <div class="item">
      <h3>权威</h3>
      <p>中央电视台推荐<br/>互联网百强企业<br/>标准起草单位</p>
    </div>
    <div class="item">
      <h3>省心</h3>
      <p>100元起投<br/>用户利益保障机制<br/>保险公司承担</p>
    </div>
  </section>

  <section class="notice clearfix">
    <a href="#"><span>2020-4-21 23:50</span> 心血来潮夜晚写的网页</a>
    <a href="#" class="more">更多公告</a>
  </section>

  <section class="product">
    <h2>
      固定期限产品
      <em>甄选优秀基金</em>
      <em>省时省力</em>
      <em>坐等收益</em>
    </h2>
    <div class="product-content">
      <div class="item">
        <h3><em>3</em>个月</h3>
        <div class="info">
          <p>约定年化收益率:<span class="year-rate">3.5% <i>起</i></span></p>
          <p>总成交金额:<span class="money">1880 <i>万元</i></span></p>
        </div>
        <div class="buy">
          <a href="#">购买</a>
        </div>
      </div>
      <div class="item">
        <h3><em>6</em>个月</h3>
        <div class="info">
          <p>约定年化收益率:<span class="year-rate">3.9% <i>起</i></span></p>
          <p>总成交金额:<span class="money">2880 <i>万元</i></span></p>
        </div>
        <div class="buy">
          <a href="#">购买</a>
        </div>
      </div>
      <div class="item">
        <h3><em>9</em>个月</h3>
        <div class="info">
          <p>约定年化收益率:<span class="year-rate">4.5% <i>起</i></span></p>
          <p>总成交金额:<span class="money">3500 <i>万元</i></span></p>
        </div>
        <div class="buy">
          <a href="#">购买</a>
        </div>
      </div>
      <div class="item">
        <h3><em>12</em>个月</h3>
        <div class="info">
          <p>约定年化收益率:<span class="year-rate">5.5% <i>起</i></span></p>
          <p>总成交金额:<span class="money">6500 <i>万元</i></span></p>
        </div>
        <div class="buy">
          <a href="#">购买</a>
        </div>
      </div>
    </div>
  </section>

  <section class="product">
    <h2>
      固定期限产品
      <em>甄选优秀基金</em>
      <em>省时省力</em>
      <em>坐等收益</em>
    </h2>
    <div class="product-content">
      <div class="item">
        <h3><em>3</em>个月</h3>
        <div class="info">
          <p>约定年化收益率:<span class="year-rate">3.5% <i>起</i></span></p>
          <p>总成交金额:<span class="money">1880 <i>万元</i></span></p>
        </div>
        <div class="buy">
          <a href="#">购买</a>
        </div>
      </div>
      <div class="item">
        <h3><em>6</em>个月</h3>
        <div class="info">
          <p>约定年化收益率:<span class="year-rate">3.9% <i>起</i></span></p>
          <p>总成交金额:<span class="money">2880 <i>万元</i></span></p>
        </div>
        <div class="buy">
          <a href="#">购买</a>
        </div>
      </div>
      <div class="item">
        <h3><em>9</em>个月</h3>
        <div class="info">
          <p>约定年化收益率:<span class="year-rate">4.5% <i>起</i></span></p>
          <p>总成交金额:<span class="money">3500 <i>万元</i></span></p>
        </div>
        <div class="buy">
          <a href="#">购买</a>
        </div>
      </div>
      <div class="item">
        <h3><em>12</em>个月</h3>
        <div class="info">
          <p>约定年化收益率:<span class="year-rate">5.5% <i>起</i></span></p>
          <p>总成交金额:<span class="money">6500 <i>万元</i></span></p>
        </div>
        <div class="buy">
          <a href="#">购买</a>
        </div>
      </div>
    </div>
  </section>

  <section class="help clearfix">
    <div class="helop-content">
      <p class="brand"></p>
      <ul>
        <li class="title">关于我们</li>
        <li><a href="#">公司介绍</a></li>
        <li><a href="#">业务模式</a></li>
        <li><a href="#">合作机构</a></li>
        <li><a href="#">服务协议</a></li>
      </ul>
      <ul>
        <li class="title">风险防范</li>
        <li><a href="#">账户安全</a></li>
        <li><a href="#">安全保障</a></li>
      </ul>
      <ul>
        <li class="title">理财产品</li>
        <li><a href="#">固定期限</a></li>
        <li><a href="#">债券</a></li>
      </ul>
      <ul>
        <li class="title">交易帮助</li>
        <li><a href="#">购买</a></li>
        <li><a href="#">赎回</a></li>
        <li><a href="#">提现</a></li>
      </ul>
      <ul>
        <li class="title">机构服务</li>
        <li><a href="#">机构中心</a></li>
        <li><a href="#">合作联系</a></li>
      </ul>
    </div>
  </section>
</div>

<footer>
  <ul>
    <li><span class="icon icon-01">支付业务许可证</span></li>
    <li><span class="icon icon-02">PCI认证</span></li>
    <li><span class="icon icon-03">Visa 验证</span></li>
    <li><span class="icon icon-04">VerSign 加密服务</span></li>
    <li><span class="icon icon-05">网络工商</span></li>
    <li><span class="icon icon-06">电子商务</span></li>
    <li><span class="icon icon-07">北京工商</span></li>
  </ul>
  <p>该网页编写时间始于2020-4-21 23:33</p>
</footer>

</body>
</html>